import React from 'react'

// 导入 NavBar 组件
import { NavBar } from 'antd-mobile'

// 导入 withRouter 高阶组件
import { withRouter } from 'react-router-dom'

// 导入 NavBar 组件的样式
import styles from './index.module.css'

// 这个组件需要使用函数组件封装还是类组件进行封装？
// 因为这个组件只是单纯的对 UI 组件进行渲染，所以使用函数组件创建即可
function NavHeader(props) {
  // 这个跳转位置不能够写死，通过组件调用者传入对应的事件才可以

  // 定义返回上一页的函数，
  // 假如组件使用者没有传递 onLeftClick 这个 props，用户点击以后会报错
  // 所以我们可以自定义一个默认的函数，实现返回
  // const defaultBack = () => props.history.go(-1)

  // 经过封装，我们发现不能够在函数组件使用通过 props 获取到 history
  // 这样假如用户不传入任何的事件或者 history ，也会报错？
  // 使用 react-router-dom 路由模块提供的 withRouter 方法(高阶组件)
  // 通过这个方法能够帮助我们在函数组件中获取到路由信息

  // 这里的 props 就是 withRouter 给提供的路由的信息，就不需要组件使用者传递路由
  const defaultBack = () => props.history.go(-1)
  // const className = props.className

  const rightContent = props.rightContent


  return (
    <div>
      {/* 顶部导航栏区域 */}
      <NavBar
        className={[styles.navbar, props.className || ''].join(' ')}
        mode="light"
        icon={<i className="iconfont icon-back"></i>}
        onLeftClick={props.onLeftClick || defaultBack}
        rightContent={rightContent}
      >
        {props.children}
      </NavBar>
    </div>
  )
}

export default withRouter(NavHeader)
